<template>
  <div>
    <tabNav :tabNavMenu = "tabNavMenu"></tabNav>
    <div class="banner">
      <a :href="aqUrl" class="aq" ca="zc_v170804_zclist_tips_click">什么是众测？</a>
      <img src="../../assets/image/publicTest/banner01.jpg" />
    </div>
    <div class="item-lists" v-for="item in testListObj">
      <dl class="flex">
        <dt><a :href="'discountDetail/discountDetail.'+isHtml +'?sid='+item.sid" :ca="'zc_v170628_zclist_click'+item.sid"><span :class="['flag', item.type==='s' ? 't' : '']"  v-html="item.type==='s' ? '特价':'免费'"></span><img :src="item.picture" /></a></dt>
        <dd>
          <a :href="'discountDetail/discountDetail.'+isHtml +'?sid='+item.sid" :ca="'zc_v170628_zclist_click'+item.sid">
            <h2>{{item.title}}</h2>
            <ul class="des">
              <li v-for = "item01 in item.subtitle ">·{{item01}}</li>
            </ul>
          </a>
        </dd>
      </dl>
      <section class="item-states flex">
        <div class="left">
          <p class="process">
            <i class="bar" :style="{width:(item.countAvailable/item.total)*100<1?0:Math.floor((item.countAvailable/item.total)*100)+'%'}"></i>
            <span>剩余{{item.countAvailable}}份/总量{{item.total}}份</span>
          </p>
          <p class="statusBtn" v-if="item.type==='s'">
            <cite v-if="item.status === 10">进行中</cite>
            <cite v-else class="end">已结束</cite>
            <span v-if="item.status ==10" v-html="item.timeToExpire"></span>           
          </p>
          <p class="statusBtn" v-else>
            <cite v-if="item.status === 21">申请中</cite>
            <cite v-if="item.status === 22">测评中</cite>
            <cite v-if="item.status === 23"  class="end">已结束</cite>
            <span v-if="item.status !=23" v-html="item.timeToExpire"></span>
          </p>
        </div>
        <div class="right">
           <a :href="'discountDetail/discountDetail.'+isHtml +'?sid='+item.sid" :ca="'zc_v170628_zclist_click'+item.sid" v-if="item.status === 10" class="btn">{{item.salePrice}}元领取</a>
           <a :href="'discountDetail/discountDetail.'+isHtml +'?sid='+item.sid" :ca="'zc_v170628_zclist_click'+item.sid" v-if="item.status === 21" class="btn">0元申请</a>
           <a :href="'discountDetail/discountDetail.'+isHtml +'?sid='+item.sid" :ca="'zc_v170628_zclist_click'+item.sid" v-if="item.status === 22" class="btn">查看入选名单</a>
           <a  href="javascript:;" ca="zc_v170628_zclist_wzmore_click"  @click="pingUrl(item)" v-if="item.status === 23 || item.status === 11" class="btn">查看众测报告</a>
        </div>        
      </section>
      <div class="comment-lists" v-if="(item.status === 11 ||item.status === 23)&&item.contents!=''">
        <h3>听听众测达人怎么说</h3>
         <ul class="lists">
          <li v-for = "item02 in item.contents">
          <div class="userinfo">
            <a :href="'commentDetail/commentDetail.'+isHtml +'?sid='+item.sid+'&id='+item02.id" class="txt" ca="zc_v170628_zclist_wzclick">
              <h2 class="thumb"><img :src="item02.thumb" /></h2>
              <div class="info">
                <p class="username">{{item02.name}}</p>
                <p class="des">{{ item02.title }}</p>
              </div>
            </a>
          </div>          
        </li>
        </ul>
      </div>
    </div>


<!--
    <div class = "squareContent" v-for="item in testListObj">
     <div>
        <h1 v-if="item.type==='s'">特价众测<span v-if="item.status === 10">{{item.timeToExpire}}</span>
        <i >
         <cite v-if="item.status === 10">进行中</cite>
         <cite v-else style="color:#bdbdbd">已结束</cite>
        </i>
        </h1>
         <h1 v-else>免费众测<span  v-if="item.status!==23">{{item.timeToExpire}}</span>
        <i>
          <cite v-if="item.status === 21">申请中</cite>
          <cite v-if="item.status === 22">测评中</cite>
          <cite v-if="item.status === 23" style="color:#bdbdbd">已结束</cite>
        </i>
        </h1>
        <a class="to-detailurl" :href="'discountDetail/discountDetail.'+isHtml +'?sid='+item.sid" :ca="'zc_v170628_zclist_click'+item.sid">
        <dl class="goodintro">
          <dt>
           <img :src="item.picture">
          </dt>
          <dd>
            <h2>{{item.title}}</h2>
            <ul>
            <li v-for = "item01 in item.subtitle ">{{item01}}</li>
            </ul>
            <dl class="progress-bar-dl">
              <dt>
                <div class = "progress-bar">
                  <p :style="{width:100-((item.countAvailable/item.total)*100<1?0:Math.floor((item.countAvailable/item.total)*100))+'%'}"></p>
                </div>
              </dt>
              <dd>
                剩余{{(item.countAvailable/item.total)*100<1?0:Math.floor((item.countAvailable/item.total)*100)}}%
              </dd>
            </dl>
            <p class="limit-count">限量{{item.total}}份</p>
            <div v-if="item.type==='s'" class="price"><strong><b>¥</b><i>{{item.salePrice}}</i></strong><span>¥{{item.price}}</span><a v-if="item.status === 10">立即领取</a></div>
            <div v-else class="price"><strong><b>¥</b><i>{{item.salePrice}}</i></strong><span>¥{{item.price}}</span>
            <a v-if="item.status === 21">立即申请</a>
            <a v-if="item.status === 22">查看入选名单</a>
            </div>
          </dd>
        </dl>
        </a>
        <div v-if="item.type==='s'">
        <div class="notice" v-if="item.status === 10&&item.memo.descr">
        <dl> 
          <dt>
            <img :src="item.memo.icon"/>
          </dt>
          <dd><p class="notice-des" v-html="item.memo.descr"></p></dd>
        </dl></div>
        </div>
        <div v-else>
         <div class="notice" v-if="(item.status === 21||item.status === 22)&&item.memo.descr">
        <dl> 
          <dt>
            <img :src="item.memo.icon"/>
          </dt>
          <dd><p class="notice-des" v-html="item.memo.descr"></p></dd>
        </dl></div>
        </div>
     </div>
     <div class = "comment-list" v-if="(item.status === 11 ||item.status === 23)&&item.contents!=''">
      <h2><span>众测达人说</span><a href="javascript:;" @click="pingUrl(item)" ca="zc_v170628_zclist_wzmore_click">查看更多»</a></h2>
      <ul>
        <li v-for = "item02 in item.contents">
           <h3>
             <a :href="'commentDetail/commentDetail.'+isHtml +'?sid='+item.sid+'&id='+item02.id" ca="zc_v170628_zclist_wzclick"><span><img :src="item02.thumb"/></span><i>{{item02.name}}</i></a>
           </h3>
           <p>
             <a :href="'commentDetail/commentDetail.'+isHtml +'?sid='+item.sid+'&id='+item02.id" ca="zc_v170628_zclist_wzclick"> {{item02.title}}</a>
           </p>
         </li>
         <!-- <li>
         <h3>
           <span><img src="../../assets/image/publicTest/pic01.png"/></span><i>容嬷嬷</i>
         </h3>
         <p>
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
         </p>
         </li>
          <li>
         <h3>
           <span><img src="../../assets/image/publicTest/pic01.png"/></span><i>容嬷嬷</i>
         </h3>
         <p>
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
         </p>
         </li> 
      </ul>
   </div>
   </div>
     <div class = "squareContent">
     <div>
      <h1>免费众测<span>{{discountTime}}</span><i>申请中</i></h1>
      <dl class="goodintro">
        <dt>
          <img src="../../assets/image/publicTest/img01.png">
        </dt>
        <dd>
          <h2>车享家定制博世新风翼雨刷（1对）</h2>
          <ul>
          <li>发动机必做养护</li>
          <li>专业清洗、安全放心</li>
          </ul>
          <dl class="progress-bar-dl">
            <dt>
              <div class = "progress-bar">
                <p></p>
              </div>
            </dt>
            <dd>
              剩余100%
            </dd>
          </dl>
          <p class="limit-count">限量9999份</p>
          <div class="price"><strong><b>¥</b><i>80</i></strong><span>¥396</span><a href="###">立即申请</a></div>
   
        </dd>
      </dl>
      <div class="notice">
      <dl> 
        <dt>
          <img src="../../assets/image/publicTest/icon01.png"/>
        </dt>
        <dd>公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告！</dd>
      </dl></div>
   </div>
    <div class = "squareContent">
   <div>
      <h1>特价众测<i class="gray">已结束</i></h1>
      <dl class="goodintro">
        <dt>
          <img src="../../assets/image/publicTest/img01.png">
        </dt>
        <dd>
          <h2>车享家定制博世新风翼雨刷（1对）</h2>
          <ul>
          <li>发动机必做养护</li>
          <li>专业清洗、安全放心</li>
          </ul>
          <dl class="progress-bar-dl">
            <dt>
              <div class = "progress-bar">
                <p></p>
              </div>
            </dt>
            <dd>
              剩余100%
            </dd>
          </dl>
          <p class="limit-count">限量9999份</p>
          <div class="price"><strong><b>¥</b><i>80</i></strong><span>¥396</span></div>
   
        </dd>
      </dl>
      <div class="notice">
      <dl> 
        <dt>
          <img src="../../assets/image/publicTest/icon01.png"/>
        </dt>
        <dd>公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告！</dd>
      </dl></div>
   </div>
      </div>
      </div>
  <div class="announcement">
     <div class="header">
       <p><strong>好物召集令</strong></p>
       <p>众测内容不够刺激？欢迎你告诉我们</p>
     </div>
     <div class="content">
       <ul>
         <li>
           <dl>
             <dt><img src="../../assets/image/publicTest/xinyuan.png" /></dt>
             <dd>
               <p><strong>愿望清单</strong></p>
               <p>你想要的众测车品或养车服务；</p>
             </dd>
           </dl>
         </li>
         <li>
           <dl>
             <dt><img src="../../assets/image/publicTest/tuijian.png" /></dt>
             <dd>
               <p><strong>推荐清单</strong></p>
               <p>你所用过的优秀车品或养车服务。</p>
             </dd>
           </dl>
         </li>
       </ul>
     </div>
     <div class="footer">
       <dl>
         <dt><img src="../../assets/image/publicTest/elephant.png" /></dt>
         <dd>
           <h2><strong>别害羞嘛！没有你不能说的，</strong></h2>
           <p>没有你不能说的<span>车享家<i>首席聊天官</i></span></p>
           <p>等着你哦~~</p>
           <div class="wechat-num"><strong>微信号：chexiangjia01</strong></div>
         </dd>
       </dl>
     </div>
   </div> -->
   <img src="https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/zc_foot.jpg" />
   <a href="javascript:;" v-if="!isShowShareBtn&&isApp" class="shareGuide" @click="share"></a>
</div>
</template>

<script>
import common from "../../assets/js/common.js";
import {Toast, Popup} from 'mint-ui';
import Vue from 'vue';
import tabNav from "./common/tabNav.vue";
Vue.component(Popup.name, Popup);
export default {
    data: function() {
        return {
           tabNavMenu:[
             {name: "众测活动", url: "", curMenu: 1},
             {name: "众测报告", url: '../publicTest/commentList/commentList.' + common.isHtml(), curMenu: 0}
           ],
           aqUrl: 'testAQ/testAQ.' + common.isHtml(),
           discountTime:"",
           freeTime:"",
           isHtml:common.isHtml(),
           ua:window.navigator.userAgent,
           isShowShareBtn:common.checkAppversionIsGt35() || false,
           isApp:common.isApp(),
           imgShareUrl:require("../../assets/image/publicTest/zc.png"),
           signUrl:process.env.NODE_ENV == 'sit' || process.env.NODE_ENV == "development" ? common.isEnv("//recruit") : common.isEnv("//wx")  ,
           shareObj:{},
           initRunFlag:"",
           testListObj: [/*{             // 众测活动项目列表
                 "sid": "s1",                   // 活动项目编号
                 "type": "s",                   // 活动类别： s - 特价众测，f - 免费众测
                 "targetURL": "http://xxx/xxxx...", // 目标商品页面网页
                 "title": "车享定制雨刷",         // 标题
                 "subtitle": ["高端无骨雨刷", "耐用、静音"],     // 副标题
                 "picture": "http://xxxxx.png",  // 活动项目图片
                 "total": 9999,                 // 总数（限量）
                 "countAvailable": 60,          // 剩余数量
                 "price": "396",                // 原价
                 "salePrice": "80",             // 折扣价
                 "timeToExpire": 123456,        // 活动结束剩余时间（毫秒），既“当前系统日期”到“结束日期“的相对时间差值
                 "status": 10,                  // 活动状态（说明见备注）
                 "memo": {                      // 活动备注
                    "icon": "http://xxxxx.png",   // 图标
                    "descr": " [敢写就敢送]活动期间#xxxxx#... "       // 描述（注：该文字中 #xxx# "#"之间的文字表示要显示为红色）
                 },
         
                 "numberOfParticipants": 1000,    // 已参与人数
                 "contents": [{       // 众测“达人说”内容列表
                    "title": "文章发布测试文章发布测试文章发布测试",       // 标题
                    "name": "左左木",                                 // 作者名称
                    "thumb": "//i2.chexiangpre.com/msweb02/upload/resources/image/2017/06/19/28524.jpg"     // 用户头像
                 }]
         
             },{  
                 "sid": "f1",                   // 活动项目编号
                 "type": "f",                   // 活动类别： s - 特价众测，f - 免费众测
                 "title": "发动机舱清洗",         // 标题
                 "subtitle": ["高端无骨雨刷", "耐用、静音"],     // 副标题
                 "picture": "http://xxxxx.png",  // 活动项目图片
                 "total": 10,                 // 总数（限量）
                 "countAvailable": 6,          // 剩余数量
                 "price": "396",                // 原价
                 "salePrice": "80",             // 折扣价
                 "timeToExpire": 14323424,        // 活动结束剩余时间（毫秒），既“当前系统日期”到“结束日期“的相对时间差值
                 "status": 23,             // 活动状态
                 "memo": {                      // 活动备注
                    "icon": "http://xxxxx.png",   // 图标
                    "descr": " [敢写就敢送]活动期间xxxxx... "       // 描述（注：该文字中 #xxx# "#"之间的文字表示要显示为红色）
                 },
         
                 "numberOfParticipants": 1000,    // 已参与人数
         
           }*/],
           commentList:{
             /* "totalRows": 7,
              "totalPages": 4,
              "pageSise": 2,
              "currentPage": 0,
              "creditTradeVOs":[{
                 "id": "1162007",
                 "title": "文章发布测试文章发布测试文章发布测试",
                 "subTitle": "",
                 "PublishDate": "2017-06-21 16:20:44",
                 "Summary":"文章发布测试文章发布测试文章发布测试文章发布测试",
                 "author": "",
                 "content": "xxxxxxx",
                 "expproject":"xx",
                 "store":"xxx",
                 "pictures1": "//i2.chexiangpre.com/msweb02/upload/resources/image/2017/06/21/28527.jpg",
                 "pictures2": "//i1.chexiangpre.com/msweb02/upload/resources/image/2017/06/19/28525.jpg",
                 "pictures3": "",
                 "link": "/cxb/pcgc/1162007.shtml",
                 "thumb": "//i2.chexiangpre.com/msweb02/upload/resources/image/2017/06/19/28524.jpg",
                 "name": "左左木",
                 "tel": "18832143482"
              }]*/
           }
        }
    },
    computed: {
     
    },
    mounted: function() {
      this.initData();
      this.ininShareData();
      
      var _this = this;
  		//打点
  		_this.$nextTick(function () {
  			common.ANA_AnalyticsScan();
  		});
    },
    components: { tabNav  },
    methods: {
      initData:function(){
        var _this = this;
        _this.$http.get(common.isdev()+"/zhongce/items.htm?t="+Date.now()).then(function(d){
                var data = d.data,
                obj  = data.obj,
                errorCode = data.errorCode;
                if(errorCode === "1"){
                  _this.testListObj = data.obj;
                  var obj = _this.testListObj;
                  //console.info(data.obj,"1313434");
                  for(var i = 0;i < obj.length;i++){
                     var ts = obj[i].timeToExpire;
                     _this.setDiscountTime(ts,i);
                     var des = obj[i].memo.descr;
                     if(obj[i].memo.descr){
                        var redText = des.replace("#","<span class='redText'>").replace("#","</span>");
                        _this.testListObj[i].memo.descr = redText;
                     } 
                  }
					//打点
					_this.$nextTick(function () {
						common.ANA_AnalyticsScan();
					});
            }
            },function(err){
                if(err.status == 408){
                  Toast(err.status);
                }else{Toast("系统异常，请稍后再试");}
          })
      },
      setDiscountTime:function(t,i){ 
            var _this = this;
            //var ts = ((new Date(2017, 6, 7, 7, 0, 0)) - (new Date()))/1000;//计算剩余的毫秒数  
            var ts = t/1000;//计算剩余的毫秒数  
            var lastTime = +new Date;    
            setInterval(function() {
              if(Math.abs(+new Date - lastTime) > 3000) {
                  console.log("从后台切回");                 
                  ts = ts - parseInt(Math.abs(+new Date - lastTime)/1000);
              }
              lastTime = +new Date;
             }, 1000);
            setInterval(function() {
                ts--;
                var dd = parseInt(ts  / 60 / 60 / 24, 10)<0?0:parseInt(ts  / 60 / 60 / 24, 10);//计算剩余的天数  
                var hh = parseInt(ts  / 60 / 60 % 24, 10)<0?0:parseInt(ts  / 60 / 60 % 24, 10);//计算剩余的小时数  
                var mm = parseInt(ts  / 60 % 60, 10)<0?0:parseInt(ts  / 60 % 60, 10);//计算剩余的分钟数  
                var ss = parseInt(ts  % 60, 10)<0?0:parseInt(ts  % 60, 10);//计算剩余的秒数  
               // var discountTime = dd+"天"+hh+"小时"+mm+"分钟"+ss+"秒后结束";
                 var discountTime = dd+"<i>天</i>"+hh+"<i>时</i>"+mm+"<i>分</i>"+ss+"<i>秒后结束</i>";
               // console.log(discountTime,"timeToExpire");
              // console.log(discountTime);
                _this.testListObj[i].timeToExpire = discountTime;
               // console.log(_this.testListObj[i].timeToExpire);
            }, 1000);      
       },
       setMemoDesrc:function(des,i){
          console.log(des,"des");
          console.log(i,"i");
          var redText = des.replace("#","<span class='redText'>").replace("#","</span>");
          console.log(redText,"redText");
          setTimeout(function () {
             document.getElementsByClassName("notice-des")[i].innerHTML = redText;
          }, 0);
       },
       ininShareData:function(){
            var _this = this;  
           //window.document.title =  obj.title;  
           //分享数据配置
            _this.shareObj = {
              friend: {
                title:'哇，这么多免费养车好物等你领，快来车享家众测广场看看吧！',
                desc: "各种众测，全是最实用的好东西喔～",
                link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?utm_source=share',
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/zc.png"
              },
              friendQuan: {
                title:"",
                desc:'哇，这么多免费养车好物等你领，快来车享家众测广场看看吧！',
                link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?utm_source=share',
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/zc.png"
              }
            };
            
            if(!common.isApp()){ 
               common.wxShare(_this);
            }else{
              if(_this.isShowShareBtn){
                _this.share();
              }  
            }
        },
        share:function(){
           var _this = this;
           common.appShare(_this);
        },
        pingUrl(item) {
          var vm = this;
          let winUrl = encodeURI(encodeURI('../publicTest/commentList/commentList.' + vm.$data.isHtml + '?sid=' +item.sid+ '&imgUrl=' + item.picture + '&title='+ item.title +'&url=discountDetail/discountDetail.' +vm.$data.isHtml+ '?sid='+item.sid));
          window.location.href = winUrl;
        }
    }
}

</script>

<style lang="scss">
@import '../../assets/css/common.scss';
@function rem($px){
  @return $px / 20 * 1rem;
}
body{
  background-color:#edf0f5;
  margin:0 auto !important;
}
.banner{position:relative;}
.banner .aq{position:absolute;top:50%;right:0;transform:translateY(-50%);width:rem(182);height:rem(60);line-height:rem(60);font-size:rem(26);background:#f2dc95;text-align:center;border-radius:rem(60) 0 0 rem(60);color:$_333;}
.squareContent{
  margin-top: rem(18);
  .to-detailurl{
    display:block;
    border-top: rem(3) solid #edf0f5;
  }
  h1{
    font-size: rem(30);
    color:#3097ea;
    position:relative;
    border-left:rem(12) solid #108ee9;
    height:rem(90);
    line-height:rem(90);
    padding-left:rem(28);
    background-color:#fff;
    span {
      color:#333;
      font-size:rem(26);
      margin-left:rem(30);
      vertical-align:top;
    }
    i{
      color:#ff3b3b;
      position: absolute;
      right:rem(20);
      font-size:rem(26);
    }
    i.gray{
      color: #bdbdbd;
    }
  }
  .goodintro{
    background-color:#fff;
    clear:both;
    overflow:hidden;
    dt,dd{
      float:left;
    }
    &>dt{
      width:rem(280);
     }
     &>dd{
      width:rem(450);
      overflow:hidden;
     }
    &>dt img{
      width:rem(280);
      height: rem(277);
    }
    &>dd{
      margin-left:rem(20);
      h2{
        font-size:rem(32);
        color:#2a2a2a;
        padding: rem(10) 0;
      }
      ul{
        margin-left:rem(30);
        li{
          list-style-type:disc; 
          font-size: rem(28);
          color: #828282;
          margin-bottom:rem(8);
        }
      }
    }
    .progress-bar-dl{
       clear: both;
       overflow: hidden;
       dt{
        padding-top: rem(14);
       }
       dd{
        font-size: rem(24);
        margin-left: rem(16);
        color:#1c1c1c;
       }
    }
    .progress-bar{
      width: rem(300);
      height: rem(7);
      background:transparent url("../../assets/image/publicTest/progress-bar.png") no-repeat top left;
      background-size:rem(300) rem(7);
      position: relative;
      p{
        width: 40%;
        height: rem(7);
        background-color: #d9d9d9;
        border-radius:rem(2) rem(2) ;
        position: absolute;
        right: 0;
      }
    }
    .limit-count{
       font-size: rem(22);
       color: #a5a5a5;
       margin-top: rem(-4);
    }
    .price{
      position: relative;
      padding-top:rem(4);
      strong{
          color: #108ee9;
          font-size:rem(24);
          vertical-align: middle;
        b{
          vertical-align: top;
          padding-top: 0.7rem;
          display: inline-block;
        }
       
        i{
          font-size: rem(40);
          margin-left:rem(2);
        }
      }
      span{
        font-size:rem(22);
        color: #828282;
        margin-left: rem(55);
        text-decoration: line-through;
      }
      a{
        display: inline-block;
        width:rem(190);
        height: rem(60);
        line-height: rem(60);
        text-align:center;
        background-color: #ff3b3b;
        font-size: rem(24);
        color: #fff;
        border-radius: rem(4);
        position: absolute;
        right: rem(20);
        bottom: rem(5);
      }
    }
  }
  .notice{
    height: rem(90);
    border: 1px solid #d9d9d9;
    border-left: 0;
    border-right: 0;
    background-color: #f9f9f9;
    padding: rem(10);

    dt img{
      width: rem(55);
      height:rem(55);
      margin-top: rem(6);
      margin-left:rem(2);
    }
    dt, dd{
      float: left;
    }
    dd{
      margin-left: rem(20);
      width:rem(640);
    }
    .redText{
      color:#ff3b3b;
    }
  }
}
.comment-list{
  h2{
    height: rem(80);
    line-height: rem(80);
    position: relative;
    padding:0 rem(20);
    border-bottom: 1px solid #e4e4e4;
    background-color: #f9f9f9;
    margin:0 rem(2);
    span{
      color:#108ee9;
      font-size: rem(28);
    }
    a{
      color: #ff3b3b;
      position:absolute;
      right: rem(20);
      font-size: rem(28);
    }
  }
  a{
    color:#1c1c1c;
    font-size: rem(24);
  }
  h3 img{
     width:rem(60);
     height:rem(60);
  }
  h3 i{
    font-size: rem(24);
    margin-left: rem(15);
    color:#1c1c1c;
  }
  h3{
    margin-bottom: rem(15);
  }
  ul{
    background-color:#efefef;
    border-bottom:1px solid #d9d9d9;  
  }
  ul li{
    padding:rem(15) rem(20);
    margin-bottom: rem(10);
    background-color: #f9f9f9
  }
   ul li:last-child{
    margin-bottom:0;
   }
}
.announcement{
  .header{
    padding-top:rem(84);   
    padding-bottom:rem(48); 
    text-align:center;
    font-size:rem(32);
    color:#8e9091;
    strong{
      font-size:rem(32);
      color:#3b678f;
    }
  }
  .content{
    padding:rem( 0) rem(115);
    li{
      padding-bottom:rem(40);
    }
    dl{
      clear:both;
      overflow:hidden;
    }
    dt,dd{
      float:left;
    }
    dd{
      margin-left:rem(40);
      font-size:rem(26);
      strong{
        font-size:rem(28);
        font-weight:normal;
      }
    }
    img{
      width:rem(75);
    }
  }
  .footer{
    padding:rem(10) rem(80) rem(90) rem(80);
    dl{
      clear:both;
      overflow:hidden;
    }
    dt,dd{
      float:left;
    }
    dt{
      padding-top:rem(16);
    }
    dd{
      margin-left:rem(10);
    }
    img{
      width:rem(142);
    }
    h2{
      font-size:rem(30);
      strong{
        font-weight:normal;
      }
    }
    p{
      font-size:rem(24);
      padding:rem(5) rem(0);
      span{
        margin-left:rem(10);
        color:#108ee9;
        i{
          margin-left:rem(10);
        }
      }
    }
    .wechat-num{
      font-size:rem(28);
      strong{
        font-weight:normal;
      }
    }
  }
}
.shareGuide{
  width:rem(100);
  height:rem(100);
  line-height:rem(100);
  text-align:center;
  color:$_fff;
  background:transparent url("../../assets/image/publicTest/share-icon.png") no-repeat top left;
  background-size:100% 100%;
  border-radius:50%;
  position:fixed;
  right:rem(10);
  top:50%;
  z-index:3;
  font-size:rem(26)
}
.notice-des{
  font-size:rem(24);
}
img{width:100%;max-width:100%;height:auto;}
.item-lists{
  background:$_fff;
  padding:rem(30) 0 rem(30) rem(30);
  margin-bottom:rem(16);
  @at-root .flex{display:flex;}
  dl{
    position:relative;
    padding-bottom:rem(14);
    border-bottom:1px solid #e8e8e8;
    &:after{
      content:"";
      width:rem(14);
      height:rem(24);
      background:url(../../assets/image/publicTest/dot-right.png) no-repeat;
      background-size:100% 100%;
      position:absolute;
      top:50%;
      right:rem(30);
      transform:translateY(-50%);
    }
    dt{
      width:rem(240);
      height:rem(240);
      margin-right:rem(20);
      position:relative;
      .flag{
        background: #0084FF;
        color: #fff;
        border-radius: 0 1rem 1rem 0;
        padding: 0 0.5rem;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        height:rem(32);
        line-height:rem(32);
        width:rem(46);      
      }
      .t{background:#00C240;}
      img{width:100%;height:100%;}
    }
    dd{
      flex:1;width:100%;overflow:hidden;padding-right:rem(60);
      h2{
        font-size:rem(30);
        line-height:rem(36);
        color:#000;
        margin-bottom:rem(24);
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;-webkit-line-clamp:2;
        -webkit-box-orient:vertical;
      }
      .des{
        li{
          font-size:rem(26);
          color:$_666;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
        }
      }
    }
  }
  .item-states{
    padding:rem(26) rem(30) 0 0;
    .left{
      width:rem(460);
      .process{
        width:rem(360);
        height:rem(30);
        line-height:rem(30);
        border:1px solid #ff6600;
        border-radius:rem(20);
        text-align:center;
        position:relative;
        margin:0 rem(34) rem(12) 0;
        overflow:hidden;
        .bar{
          position:absolute;
          top:0;
          left:0;
          z-index:1;
          width:100%;
          height:100%;
          background:#ffe6d6;
          border-radius:rem(20) 0 0 rem(20);
        }
        span{
          position:absolute;
          z-index:2;
          left:0;
          width:100%;
          color:#ff6600;
          font-size:rem(20);
        }
      }
      .statusBtn{
        font-size:rem(22);
        white-space: nowrap;
        cite{
          color:#0084ff;
          font-size:rem(26);
        }
        .end{color:$_999;}
        span{
          font-size:rem(26);
        }
        i{
          color:$_999;
          margin:0 rem(3);
          font-size:rem(22);
        }
      }
    }
    .right{
      width:100%;
      height:rem(80);
      text-align:right;
      .btn{
        width:rem(230);
        height:100%;
        text-align:center;
        line-height:rem(80);
        display:inline-block;
        background:#ff6600;
        border-radius:rem(8);
        color:$_fff;
        font-size:rem(30);
      }

    }
  }
  .comment-lists{
    background:#fafafa;
    padding:rem(30) 0 rem(30) rem(30);
    margin-top:rem(30);
    h3{color:$_333;font-size:rem(30);}
    .lists{
      li{padding:rem(20);border-bottom:1px solid #e8e8e8;
        &:last-child{border-bottom:none;padding-bottom:0;
          .userinfo{margin-bottom:0}
        }
        .userinfo{margin-bottom:rem(20);
          .thumb{width:rem(72);height:rem(72);border-radius:50%;background:#959595;display:inline-block;vertical-align:top;
            img{width:rem(72);height:rem(72);border-radius:50%;}
          }
          .info{display:inline-block;width:82%;margin-left:rem(10);vertical-align:middle;
            .username{color:$_999;font-size:rem(26)}
            .des{color:#333;font-size:rem(30);display:block;margin-top:rem(4);line-height:rem(40);
            }
          }
        }            
      }
    }
  }
  
}
</style>

